<template>
	<div class="page">
		<!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">项目管理</span>　|　<span>添加新项目</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<el-form :model="form" block id="addform">
			<el-form-item label="项目名称:" :label-width="formLabelWidth" >
				<el-input v-model="form.product_name" auto-complete="off" autofocus class="inpu" placeholder="输入项目名称"></el-input>
			</el-form-item>
			<el-form-item label="项目KEY:" :label-width="formLabelWidth" >
				<el-input v-model="form.product_key" auto-complete="off" autofocus class="inpu" placeholder="输入项目Key"></el-input>
			</el-form-item>
			<el-form-item label="项目描述:" :label-width="formLabelWidth" >
				<el-input v-model="form.product_desc" auto-complete="off" class="inpu"  type="textarea" :row="2" placeholder="输入描述内容"></el-input>
			</el-form-item>
		   <!-- <el-form-item label="父级项目:" :label-width="formLabelWidth">
				<el-cascader
					class="inpu"
					v-model="form.product_pid"
					:options="products"
					placeholder="请选择,不选为一级项目"
					:props="{ checkStrictly:true,expandTrigger:'hover',emitPath:false}">
				</el-cascader>
			</el-form-item> -->
			<!-- <el-form-item label="默认监控方式:" class="formline" :label-width="formLabelWidth">
				<el-select v-model="form.product_index" class="inpu">
					<el-option v-for="item in viewWays" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select><br>
				<div style="width:auto;height:0.4rem;">此默认只适用于监控中心</div>
			</el-form-item> -->
			<!-- <el-form-item label="自定义监控菜单:"  class="formline"  style="margin-top:-0.2rem;" :label-width="formLabelWidth">
				
			</el-form-item>
			<div class="sensorHead" ref="sensorHead" >
				
				<span class="topTitle" style="margin-left:0.7rem;">名称</span>
				<span class="topTitle" style="width:1.2rem;margin-left:0.2rem;">排序</span>
				<span class="topTitle" style="margin-left:0.1rem;">是否显示</span>
				<span class="topTitle" style="margin-left:0;">默认监控</span>
			</div>
			<el-form-item v-for="(item,i) in form.product_menu" :key="item.key" class="oneDomain" label-width="auto" >
			    
				<el-input class="inpu_2" v-model="item.title" :placeholder="item.title" ></el-input>
				<el-input class="inpu_2" style="width:1.4rem;margin-left:0.5rem;margin-right:0.4rem" v-model="item.number" placeholder="排序" ></el-input>
				<span class="oneBox" :class="item.isShow==1?'isChoose':'onChoose'"    @click="chooseOneShow(i)"><span>√</span></span>
				
				<span class="oneBox" :class="item.isIndex==1?'isChoose':'onChoose'"  style="margin-left:1.8rem;"  @click="chooseOneIndex(i,item,item.isIndex)"><span>√</span></span>
				
			</el-form-item> -->
			
		</el-form>
		<div class="dialog-footer">
			<el-button type="success" size="small" @click="addoption">保存</el-button>
			<el-button type="primary" size="small" @click="resetForm">重置</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'addProduct',
		data() {
			return {
				//formLabelWidth: '2.6rem',
				formLabelWidth: '2rem',
				// viewWays:[
				// 	{
				// 		value:'data',
				// 		label:'实时数据'
				//     },
				// 	{
				// 		value:'view',
				// 		label:'组态监控'
				// 	}
				// 	// {
				// 	// 	value:'history',
				// 	// 	label:'历史数据'
				// 	// },
				// 	// {
				// 	// 	value:'graph',
				// 	// 	label:'历史曲线'
				// 	// },
				// 	// {
				// 	// 	value:'alarm',
				// 	// 	label:'报警记录'
				// 	// },
				// 	// {
				// 	// 	value:'log',
				// 	// 	label:'操作日志'
				// 	// },
				// 	// {
				// 	// 	value:'connect',
				// 	// 	label:'上下线'
				// 	// },
				// 	// {
				// 	// 	value:'map',
				// 	// 	label:'设备地图'
				// 	// },
				// 	// {
				// 	// 	value:'video',
				// 	// 	label:'视频监控'
				// 	// }
				// ],
				//ws: '',
				//baseurl: this.$baseurl,
				// defaultMenu:[
				// 	{defaultTitle:'实title: "实时数据",key: "data",number:1,isShow:1,isIndex:1},
				// 	{defaultTitle:'组态监控',title: "组态监控",key: "view",number:2,isShow:1,isIndex:0},
				// 	{defaultTitle:'历史数据',title: "历史数据",key: "history",number:3,isShow:1,isIndex:0},
				// 	{defaultTitle:'数据分析',title: "数据分析",key: "analysis",number:4,isShow:1,isIndex:0},
				// 	// {title: "报警记录",key: "alarm"},
				// 	{defaultTitle:'操作记录',title: "操作记录",key: "log",number:5,isShow:1,isIndex:0},
				// 	{defaultTitle:'设备地图',title: "设备地图",key: "map",number:6,isShow:1,isIndex:0},
				// 	{defaultTitle:'视频监控',title: "视频监控",key: "video",number:7,isShow:1,isIndex:0}
				// ],
				// defaultMenu:[
				// 	{title: "实时数据",key: "data",number:1,isShow:1,isIndex:1},
				// 	{title: "组态监控",key: "view",number:2,isShow:1,isIndex:0},
				// 	{title: "历史数据",key: "history",number:3,isShow:1,isIndex:0},
				// 	{title: "数据分析",key: "analysis",number:4,isShow:1,isIndex:0},
				// 	{title: "报警记录",key: "alarm",number:5,isShow:1,isIndex:0},
				// 	{title: "操作记录",key: "log",number:6,isShow:1,isIndex:0},
				// 	{title: "设备地图",key: "map",number:7,isShow:1,isIndex:0},
				// 	{title: "视频监控",key: "video",number:8,isShow:1,isIndex:0}
				// ],
				products:[],
				form: {
					product_name: '',
					product_desc: '',
					product_key:'',
					//product_pid:''
					//product_menu:[]
					
				}
            }
		},
		
		created(){
			//this.getProduct();
			//this.form.product_menu = Array.from(this.defaultMenu);
		},
	
		methods: {
			resetForm() {
				this.form.product_name = '';
				this.form.product_desc = '';
				//this.form.product_pid='';
				this.form.product_key='';
				//this.form.product_menu = Array.from(this.defaultMenu);
			},
			
			goBack() {
				this.$router.go(-1);
			},
			
		 //    getProduct(){
			// 	var that=this;
			// 	this.$http({
			// 		method: 'post',
			// 		url: '/api/product/tree',
			// 		data: {}
			// 	}).then(res => {
			// 		if (res && res.data.result == "success") {
			// 			this.products=res.data.data;
			// 			//console.log(res.data.data);
						
			// 		}
			// 		//console.log("charu")
			// 	}).catch(error => {
					
			// 		console.log(error);
			// 	});
			// },
	
			// chooseOneIndex(n,item,isIndex){
			// 	this.form.product_menu[n].isIndex=this.form.product_menu[n].isIndex==1?0:1;
			// 	if(this.form.product_menu[n].isIndex){
			// 		this.form.product_menu[n].isShow=1;
			// 		for(let i=0,len=this.form.product_menu.length;i<len;i++){
			// 			if(this.form.product_menu[i].key!=item.key){
			// 				this.form.product_menu[i].isIndex=0;
			// 			}
			// 		}
			// 	}
			// 	let  without=this.form.product_menu.every(function(item,index,arr){
			// 		return item.isIndex==0
			// 	})
			// 	if(without){
			// 		this.form.product_menu[0].isIndex=1;
			// 		this.form.product_menu[0].isShow=1;
			// 	}
				
			// },
			
			// //选中当前一个或取消的函数；
			// chooseOneShow(index){
			// 	this.form.product_menu[index].isShow=this.form.product_menu[index].isShow==1?0:1;
			// 	if(this.form.product_menu[index].isShow==0 && this.form.product_menu[index].isIndex==1){
			// 		this.$message({
			// 			message: '默认监控项必须显示，或先取消默认!',
			// 			type: 'info',
			// 			center: true
			// 		})
			// 		this.form.product_menu[index].isShow=1;
			// 		return 
			// 	}
			// 	let  without=this.form.product_menu.every(function(item,index,arr){
			// 		return item.isShow==0
			// 	})
			// 	if(without){
			// 		this.$message({
			// 			message: '请至少保留一个菜单!',
			// 			type: 'info',
			// 			center: true
			// 		})
			// 		this.form.product_menu[index].isShow=1;
			// 	}
			// },
			
			addoption() {
				this.$http({
					method: 'post',
					url: 'api/product/add',
					data:this.form
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							message: '恭喜,添加项目成功!',
							type: 'success',
							center: true
						});
						this.$router.go(-1);
					}
					//console.log("charu")
				}).catch(error => {
					
					console.log(error);
				});
			}
		}
	}
</script>

<style scoped>
	#addform {
		text-align: left;
		margin-top: 0.3rem;
		line-height:0.6rem;
	}

	@media all and (max-width:2560px) {
	    .sensorHead {
	        width:40%!important;
	    }
	   
	}
	
	@media all and (max-width:1920px) {
	    .sensorHead {
	        width: 40%!important;
	    }
	   
	}
	
	@media all and (max-width:1600px) {
	    #addform {
	        margin-left: -0.3rem!important;
	    }
	    .oneDomain {
	        margin-top: 0.2rem !important;
	    }
	}
	
	@media all and (max-width:1366px) {
	    #addform {
	        width: 100%!important;
	        margin-left: 0rem!important;
	    }
	   /* .tip {
	        font-size: 0.4rem!important;
	    } */
	}
	
	
	.sensorHead {
		margin-left:0.7rem!important;
	    height:0.8rem;
	    line-height:0.8rem;
	    /* border:1px solid red; */
	    width:60%;
	    border-bottom: 1px solid #111;
	    margin: -0.4rem 0 0.4rem 0;
	    padding: 0;
	    padding-left: 0.2rem;
	}
	
	.oneDomain>>>.el-input__inner {
	    padding-left: 2px;
	    padding-right: 2px;
		text-align: center;
		height:0.6rem!important;
		line-height:0.6rem!important;
		border:none;
		margin-top:-0.1rem;
		border:1px solid #ccc!important;
		
	}
	
	.oneDomain>>>.el-select__caret {
	    font-size: 12px;
	}
	
	.oneDomain>>>.el-input__icon {
	    width: 14px;
	}
	
	.inpu {
	    width: 5rem;
	    vertical-align: middle;
	    /* transform: translateY(0.1rem)!important; */
	}
	
	.inpu_2 {
	    width: 2.2rem;
	    margin-right: 0.1rem;
		height:0.6rem!important;
		line-height:0.6rem!important;
		text-align: center;
	    vertical-align: middle;
		border:none;
	}
	
	.topTitle{
		display:inline-block;
		width:2rem;
		height:0.6rem!important;
		line-height:0.6rem!important;
	    /* text-align: center; */
		vertical-align: middle;
		
	}
	   
	.oneDomain {
	    margin-left: 0.9rem;
	    height: 0.65rem;
	    line-height: 0.65rem;
	    width:60%;
		margin-top:-0.2rem;
	    white-space: nowrap;
	}
	
	.oneBox,.typeBox{
		display: inline-block;
		width:0.5rem;
		height:0.5rem!important;
		line-height:0.5rem;
		text-align:center;
		transform: translateY(2px);
		margin-left:0.5rem;
		cursor:pointer;
		border-radius: 4px;
		
	}
	
	.typeBox{
		margin:0;
	}
	
	.isChoose{
		border:1px solid #409eff;
		color:#fff;
		background-color:#409eff;
	}
	.onChoose{
		border:1px solid #ccc;
		color:#fff;
		background-color:#fff;
	}
	
	.inpu /deep/ .el-input__inner{
		padding-left:4px;
		padding-right:4px;
	}
	
	.inpu /deep/ .el-textarea__inner{
		padding-left:4px;
		padding-right:4px;
	}
	
	
</style>
